/* eslint-disable */
import React from 'react';
import styles from './AdvancedSearch.less';

import { Link } from 'dva/router'

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

import { makeStyles } from '@material-ui/core/styles';

import InputLabel from '@material-ui/core/InputLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import NativeSelect from '@material-ui/core/NativeSelect';
import Header from './components/common/Header';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

function NativeSelects() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    age: '',
    name: 'hai',
  });

  const handleChange = (event) => {
    const name = event.target.name;
    setState({
      ...state,
      [name]: event.target.value,
    });
  };
  return (
    <FormControl className={classes.formControl}>
      <NativeSelect
        value={state.age}
        onChange={handleChange}
        name="age"
        className={classes.selectEmpty}
        inputProps={{ 'aria-label': 'age' }}
      >
        <option value="">政策法规</option>
        <option value={10}>管理制度</option>
        <option value={20}>行业标准</option>
        <option value={30}>先进技术</option>
      </NativeSelect>
    </FormControl>
  )
}

const DatePickerStyle = makeStyles((theme) => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
}));

function DateAndTimePickers() {
  const DatePickerclasses = DatePickerStyle();

  return (
    <form className={DatePickerclasses.container} noValidate>
      <TextField
        id="datetime-local"
        type="datetime-local"
        defaultValue="2020-08-15T10:30"
        className={DatePickerclasses.textField}
        InputLabelProps={{
          shrink: true,
        }}
      />
    </form>
  );
}


export default class AdvancedSearch extends React.Component {
  render() {
    return (
      <div>
        {/* <Header title="综合服务查询"/> */}
        <div className={styles.main}>
          <div className={styles.twoItemFlex}>
            <span>关键词</span>
            <TextField id="standard-basic" placeholder="根据关键词进行检索" />
          </div>
          <div className={styles.twoItemFlex}>
            <span>文件类型</span>
            <NativeSelects />
          </div>
          <div className={styles.twoItemFlex}>
            <span>发文机构</span>
            <NativeSelects />
          </div>
          <div className={styles.threeItemFlex}>
            <span>发布日期</span>
            <DateAndTimePickers />
            <DateAndTimePickers />
          </div>

          <Button variant="contained" color="primary">
            <Link to="/App/articleSearchDetail" style={{
              color: 'white'
            }}>
              高级搜索
            </Link>
          </Button>
        </div>
      </div>

    );
  }
}
